<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Export</span></h1>
        <p>Table data can be exported to various formats.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts">
            <ng-template pTemplate="caption">
                <div class="p-d-flex">
                    <button type="button" pButton pRipple icon="pi pi-file-o" (click)="dt.exportCSV()" class="p-mr-2" pTooltip="CSV" tooltipPosition="bottom"></button>
                    <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success p-mr-2"  pTooltip="XLS" tooltipPosition="bottom"></button>
                    <button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()" class="p-button-warning p-mr-2" pTooltip="PDF" tooltipPosition="bottom"></button>
                    <button type="button" pButton pRipple icon="pi pi-filter" (click)="dt.exportCSV({selectionOnly:true})" class="p-button-info p-ml-auto" pTooltip="Selection Only" tooltipPosition="bottom"></button>
                </div>
            </ng-template>
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns">
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns">
                <tr [pSelectableRow]="rowData">
                    <td *ngFor="let col of columns">
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts"&gt;
    &lt;ng-template pTemplate="caption"&gt;
        &lt;div class="p-d-flex"&gt;
            &lt;button type="button" pButton pRipple icon="pi pi-file-o" (click)="dt.exportCSV()" class="p-mr-2" pTooltip="CSV" tooltipPosition="bottom"&gt;&lt;/button&gt;
            &lt;button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success p-mr-2"  pTooltip="XLS" tooltipPosition="bottom"&gt;&lt;/button&gt;
            &lt;button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()" class="p-button-warning p-mr-2" pTooltip="PDF" tooltipPosition="bottom"&gt;&lt;/button&gt;
            &lt;button type="button" pButton pRipple icon="pi pi-filter" (click)="dt.exportCSV(&#123;selectionOnly:true&#125;)" class="p-button-info p-ml-auto" pTooltip="Selection Only" tooltipPosition="bottom"&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-columns="columns"&gt;
        &lt;tr [pSelectableRow]="rowData"&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Product &#125; from '../../domain/product';
import &#123; ProductService &#125; from '../../service/productservice';

@Component(&#123;
    templateUrl: './tableexportdemo.html'
&#125;)
export class TableExportDemo implements OnInit &#123;

    products: Product[];

    selectedProducts: Product[];

    constructor(private productService: ProductService) &#123; &#125;

    cols: any[];

    exportColumns: any[];

    ngOnInit() &#123;
        this.productService.getProductsSmall().then(data =&gt; this.products = data);

        this.cols = [
            &#123; field: 'code', header: 'Code' &#125;,
            &#123; field: 'name', header: 'Name' &#125;,
            &#123; field: 'category', header: 'Category' &#125;,
            &#123; field: 'quantity', header: 'Quantity' &#125;
        ];

        this.exportColumns = this.cols.map(col =&gt; (&#123;title: col.header, dataKey: col.field&#125;));
    &#125;

    exportPdf() &#123;
        import("jspdf").then(jsPDF =&gt; &#123;
            import("jspdf-autotable").then(x =&gt; &#123;
                const doc = new jsPDF.default(0,0);
                doc.autoTable(this.exportColumns, this.products);
                doc.save('products.pdf');
            &#125;)
        &#125;)
    &#125;

    exportExcel() &#123;
        import("xlsx").then(xlsx =&gt; &#123;
            const worksheet = xlsx.utils.json_to_sheet(this.products);
            const workbook = &#123; Sheets: &#123; 'data': worksheet &#125;, SheetNames: ['data'] &#125;;
            const excelBuffer: any = xlsx.write(workbook, &#123; bookType: 'xlsx', type: 'array' &#125;);
            this.saveAsExcelFile(excelBuffer, "products");
        &#125;);
    &#125;

    saveAsExcelFile(buffer: any, fileName: string): void &#123;
        import("file-saver").then(FileSaver =&gt; &#123;
            let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
            let EXCEL_EXTENSION = '.xlsx';
            const data: Blob = new Blob([buffer], &#123;
                type: EXCEL_TYPE
            &#125;);
            FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
        &#125;);
    &#125;
&#125;
</app-code>

        </p-tabPanel>

    </p-tabView>
</div>